
<!--let hero of heroes$ | async-->
<!--heroes$表示已个Observable而非一个heroes[], async它会自动订阅Observable,这样我们就不需要在类中这样申明了-->
<div id="search-component">
    <h4><label for="search-box">Hero Search</label></h4>
    <input #searchBox id="search-box" (input)="search(searchBox.value)"/>
    <ul class="search-result">
        <li *ngFor="let hero of heroes$ | async">
            <a routerLink="/detail/{{hero.id}}">
                {{hero.name}}
            </a>
        </li>
    </ul>
</div>